﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/JQuery-1-10-2.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
		.top{
		       width: 1200px;
		     margin:0 auto;
			height：300px;
		}
        .body
        {
            width: 1200px;
            margin:0 auto;
            height:100%;
			margin-top:10px;
                   }
        .left
        {
            float:left;
            width:15%;
            height:100%;
                text-align: center;
            }
            .content
            {
                    width: 85%;
                    float: right;
                }
                li
                {
                 cursor:pointer
                }
                .child_li:hover
                {
                 background:lightblue;   
                }
    </style>
</head>
<body>
    <div class="top">
        这面放图片</div>
    <div class="body">
        <div class="left">
            <ul id="my_ul" class="list-group" style="text-algin: center">
                <li class="list-group-item">免费域名注册</li>
                <li class="list-group-item">免费 Window2121212 空间托管</li>
                <li class="list-group-item">图像的数量</li>
                <li class="list-group-item">24*7 支持</li>
                <li class="list-group-item">每年更新成本</li>
            </ul>
        </div>
        <div class="content">
            <textarea class="form-control" rows="12" id="my_txt"></textarea>
        </div>
    </div>
    <script>
        $(function () {
            $.ajax({
                url: "test.txt", //json文件位置
                asunc: false,
                type: "GET", //请求方式为get
                dataType: "json", //返回数据格式为json
                scriptCharset: 'utf-8',
                success: function (data) {//请求成功完成后要执行的方法                       
                    $.each(data.f_nav, function (i, val) {
                        var newStr = " <li class='list-group-item par_li' id='" + val.Id + "'>" + val.name + "</li>";
                        $("#my_ul").append(newStr);
                        var arrtxt = [];
                        $.each(data.s_nav, function (j, dtxt) {
                            if (val.Id == dtxt.Id) {
                                arrtxt.push(dtxt);
                            }
                        });

                        if (arrtxt.length > 0) {
                            var str = " <ul class='list-group child_ul' style='text-algin: center'>";
                            $.each(arrtxt, function (i, arr) {
                                str += " <li class='list-group-item child_li' id='c" + arr.Cid + "'>" + arr.text + "</li>";
                            });
                            str += "</ul>";
                            $("#" + val.Id).append(str)
                        }
                        $(".child_ul").hide();
                    });

                    showChildLi();
                    GetText();
                    //     GetInfo();
                },
                error: function (data) {

                }
            })
        });

        function showChildLi() {
            $("#my_ul .par_li").bind("click", function () {
                $(".child_ul").hide();
                var par_li = $(this);
                var chi_ul = par_li.find(".child_ul");
                if (chi_ul.length > 0) {
                    var aa = chi_ul.context.children
                    $(aa).show();
                }

            });
        }

        function GetText() {
            $(".child_ul li").bind("click", function () {
                var child_li = $(this);
                var id = child_li.attr("id");
                var cid = id.substr(1, 1);
                $.ajax({
                    url: "test.txt",
                    async: false,
                    type: "get",
                    dataType: "json",
                    scriptCharset: 'utf-8',
                    success: function (data) {
                        $.each(data.txt, function (i, val) {
                            if (cid == val.Id.toString()) {
                                $("#my_txt").val(val.text);
                            }
                        });
                    }

                });

            });
        }

        function GetInfo() {
            $("#my_ul .par_li").bind("click", function () {
                var p_ul = $(this);
                if (p_ul.context.children.length > 0) {
                    return;
                }
                var id = p_ul.attr("id");
                if (id != "undefined" && id != null) {
                    $.ajax({
                        url: "test.txt",
                        asunc: false,
                        type: "GET",
                        dataType: "json",
                        scriptCharset: 'utf-8',
                        success: function (data) {
                            $(".child_ul").hide();
                            var a = p_ul.find(".child_ul");
                            var str = " <ul class='list-group child_ul' style='text-algin: center'>";
                            $.each(data.txt, function (i, val) {
                                if (val.Id == id) {
                                    //                                    $("#my_txt").val(val.text);
                                    //                                    return;
                                    str += " <li class='list-group-item'>" + val.text + "</li>";
                                }
                            });
                            str += "</ul>";
                            p_ul.append(str);
                        },
                        error: function (data) {

                        }
                    })
                } else {
                    $("#my_txt").val("");
                }
            });
        }
    </script>
</body>
</html>
